<!-- 考勤 -->
<template>
	<div id="attendance" class="app">
		<mt-cell title="学期累计旷课" :value="total"></mt-cell>
		<table border="0" class="list" cellspacing="0">
			<thead>
				<tr>
					<th v-for="item in list.th">{{item}}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in list.data">
					<td v-for="value in item">{{value}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	name: 'attendance',
	//首页一开始默认加载的数据
	created : function(){
		this.createdGetData()
	},
	data () {
		return {
		 	total : 0,
		 	list : {
		 		th : ["课程编号","课程名称","详细信息"],
		 		data : []
		 	}
		}
	},
	computed : {
		// 通过判断 store 中refreshName值等于当前路径 / 就刷新
		calcRefresh(newVal,oldVal){
			if(this.$store.state.refreshName == '/attendance'){
				console.log('执行刷新')
				// 将 refreshName 重新设置为 空
				this.$store.commit({
					type : 'changeRefreshName',
					refreshName :''
				})
				this.createdGetData()
			}
		}
	},
	//需要watch一下才能够获取到值，不知道为什么
	watch : {
		calcRefresh(){}
	},
	methods : {
		//页面已加载就发出请求以及改变导航栏标题
		createdGetData(){
			this.$store.dispatch({
				type : 'postData',
				url : 'http://qietu.wenye123.com/test_mysise/curl.php?method=attendance',
				data : {
					user : this.$store.state.user,
					pass : this.$store.state.pass,
					sise_cookie : this.$store.state.sise_cookie,
				},
				callBack :(data)=>{
					if( data.code==200 && data.msg=='success'){
						// 获取学生学期累计旷课
						this.total = data.resData.total;
						//获取学生 考勤 数据
						let list = data.resData.list;
						this.$set(this.list, "data", list)
					} else if (data.code == 404 && data.msg == "failed") {
						//关闭加载框
						Indicator.close();
						//提示
						Toast({
							message : '获取数据失败',
							position : 'bottom',
							duration : 3000
						});
					}
				}
			});
			this.$store.commit({
				type : 'changeTitleFn',
				title : '考勤'	
			});
		},
	}
}
</script>

<style>
	#attendance {
		
	}
	#attendance .list {
		width: 100%;
	}
	#attendance .list th, #attendance .list td {
		font-size: 14px;
		border-left: 1px solid #fff;
		border-top: 1px solid #fff;
		padding: 5px;
		text-align: center;
	}
</style>
